import styles from './index.module.less';
import * as funs from './funs';
import { Card, Form, Input, Button } from '@/components/base';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import React from 'react';
import { useLoading } from '@/utils/hooks';

interface ILogonForm {
    /** 用户名 */
    username: string;

    /** 密码 */
    password: string;
}

export default function Logon() {


    const [form] = Form.useForm<ILogonForm>();
    const { run, loading } = useLoading();

    const onFinish = React.useCallback(async (e: ILogonForm) => {
        run(async () => {
            await funs.logon(e.username, e.password)
        })
    }, [run]);

    return (
        <Form form={form} className={styles['logon']} onFinish={onFinish} >
            <Card className={styles['logon-card']}>
                <div className={styles['title']} >大生富发</div>

                <Form.Item
                    name='username'
                    label='用户名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                    initialValue='admin'
                >
                    <Input onChange={console.log} placeholder='请输入姓名' />
                </Form.Item>

                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                    initialValue='admin123'
                >
                    <PasswordInput placeholder='请输入密码' />
                </Form.Item>

                <Button type='submit' loading={loading} block size='large' color='primary'>登陆</Button>
            </Card>
        </Form>
    )
}


function PasswordInput(
    props: {
        placeholder?: string;
        value?: string;
        onChange?: (value: string) => void;
    }
) {

    const [visible, setVisible] = React.useState(false);

    return (
        <div className={styles['password']}>
            <Input
                className={styles.input}
                placeholder='请输入密码'
                type={visible ? 'text' : 'password'}
                onChange={props.onChange}
                value={props.value}
            />
            <div className={styles.eye}>
                {!visible ? (
                    <EyeInvisibleOutlined onClick={() => setVisible(true)} />
                ) : (
                    <EyeOutlined onClick={() => setVisible(false)} />
                )}
            </div>
        </div>
    )
}